<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content">
              <a-textarea v-model="model.content" rows="2" placeholder="请输入内容" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea v-model="model.remark" rows="2" placeholder="请输入备注" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="引用函数列表" :key="refKeys[0]" :forceRender="true">
        <j-vxe-table keep-source :ref="refKeys[0]" :loading="dataCiteFunctionTable.loading"
          :columns="dataCiteFunctionTable.columns" :dataSource="dataCiteFunctionTable.dataSource" :maxHeight="300"
          :disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="true" />
        <a-row style="margin-top: 15px;">
          <a-col :span="6">
            <a-button @click="showAdd('gdqz')">滚动取值</a-button>
            <a-button style="margin-left: 5px;" @click="showAdd('drjh')">当日统计</a-button>
            <a-button style="margin-left: 5px;" @click="showAdd('dyjh')">当月统计</a-button>
          </a-col>
          <a-col :span="12">
            <a-button style="margin-left: 5px;" @click="showAdd('qbzz')">标准值获取</a-button>
            <a-button style="margin-left: 15px;" @click="showAdd('rbqz')">日报取值</a-button>
            <a-button style="margin-left: 5px;" @click="showAdd('rbgd')">日报滚动取值</a-button>
            <a-button style="margin-left: 5px;" @click="showAdd('qrgs')">嵌入子算法</a-button>
          </a-col>
          <a-col :span="6">
            <a-button style="float:right;margin-left: 3px;">函数试算</a-button>
            <j-dict-select-tag placeholder="选择槽号" style="width: 120px;float:right;" />
          </a-col>
        </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane tab="运行结果区间设置" :key="refKeys[1]" :forceRender="true">
        <j-vxe-table keep-source :ref="refKeys[1]" :loading="dataResultRangeSetTable.loading"
          :columns="dataResultRangeSetTable.columns" :dataSource="dataResultRangeSetTable.dataSource" :maxHeight="300"
          :disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="true" />
      </a-tab-pane>
    </a-tabs>

    <j-modal :visible.sync="modal.visible" :width="600" :title="modal.title">
      <template>
        <a-form v-if="modal.functionCode=='gdqz'">
          <a-form-item label="起始时间" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
            <a-row :gutter="8">
              <a-col :span="12">
                <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss" />
              </a-col>
              <a-col :span="12">
                <a-checkbox :checked="checkNick">
                  运算时取系统时间
                </a-checkbox>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item label="滚动" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
            <a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
              <a-select defaultValue="alipay" style="width: 100px">
                <a-select-option value="alipay">向前</a-select-option>
              </a-select>
              <a-input :style="{width: 'calc(50% - 60px)'}" value="1" />
              <a-input :style="{width: 'calc(50% - 60px)'}" value="天" />
            </a-input-group>
          </a-form-item>
          <a-form-item label="属性" :labelCol="{span: 5}" :wrapperCol="{span: 19}"> 
            <a-select defaultValue="l1:电压">
              <a-select-option value="l1:电压">l1:电压</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="聚合" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
            <a-select defaultValue="平均值">
              <a-select-option value="平均值">平均值</a-select-option>
            </a-select>
          </a-form-item>

        </a-form>
      </template>
    </j-modal>
  </a-spin>

</template>

<script>

  import { getAction } from '@/api/manage'
  import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'
  import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'

  export default {
    name: 'DataAlgorithmLibraryForm',
    mixins: [JVxeTableModelMixin],
    components: {
      JFormContainer,
    },
    data() {
      return {
        modal: {
          title: '',
          visible: false,
          functionCode: ''
        },

        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        model: {
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
        },
        refKeys: ['dataCiteFunction', 'dataResultRangeSet',],
        tableKeys: ['dataCiteFunction', 'dataResultRangeSet',],
        activeKey: 'dataCiteFunction',
        // 引用函数列表
        dataCiteFunctionTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: 'ID',
              key: 'functionId',
              type: JVXETypes.input,
              width: "200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '类型',
              key: 'type',
              type: JVXETypes.input,
              width: "200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '参数',
              key: 'parameter',
              type: JVXETypes.input,
              width: "200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
          ]
        },
        // 运行结果区间设置
        dataResultRangeSetTable: {
          loading: false,
          dataSource: [],
          columns: [
            // {
            //   title: '区间设置id',
            //   key: 'extentSetId',
            //    type: JVXETypes.input,
            //   width:"200px",
            //   placeholder: '请输入${title}',
            //   defaultValue:'',
            // },
            {
              title: '区间范围',
              key: 'rangeValue',
              type: JVXETypes.input,
              width: "200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '决策参考值',
              key: 'referenceValue',
              type: JVXETypes.input,
              width: "200px",
              placeholder: '请输入${title}',
              defaultValue: '',
              validateRules: [{ pattern: "n", message: "${title}格式不正确" }],
            },
            {
              title: '处理措施',
              key: 'handleMeasure',
              type: JVXETypes.input,
              width: "200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
          ]
        },
        url: {
          add: "/dataAlgorithmLibrary/dataAlgorithmLibrary/add",
          edit: "/dataAlgorithmLibrary/dataAlgorithmLibrary/edit",
          queryById: "/dataAlgorithmLibrary/dataAlgorithmLibrary/queryById",
          dataCiteFunction: {
            list: '/dataAlgorithmLibrary/dataAlgorithmLibrary/queryDataCiteFunctionByMainId'
          },
          dataResultRangeSet: {
            list: '/dataAlgorithmLibrary/dataAlgorithmLibrary/queryDataResultRangeSetByMainId'
          },
        }
      }
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
    },
    methods: {
      showAdd(functionCode) {
        this.modal.functionCode = functionCode;
        this.modal.visible = true
        switch (this.modal.functionCode) {
          case 'gdqz':
            this.modal.title = '新建滚动单值函数'
            break;
          case 'drjh':
            this.modal.title = '新建当日统计函数'
            break;
          case 'dyjh':
            this.modal.title = '新建当月统计函数'
            break;
          case 'qbzz':
            this.modal.title = '新建标准值获取'
            break;
          case 'rbqz':
            this.modal.title = '新建日报取值'
            break;
          case 'rbgd':
            this.modal.title = '新建日报滚动取值'
            break;
          case 'qrgs':
            this.modal.title = '新建嵌入子算法'
            break;
          default:
            break;
        }
      },
      addBefore() {
        this.dataCiteFunctionTable.dataSource = []
        this.dataResultRangeSetTable.dataSource = []
      },
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        this.$nextTick(() => {
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.dataCiteFunction.list, params, this.dataCiteFunctionTable)
          this.requestSubTableData(this.url.dataResultRangeSet.list, params, this.dataResultRangeSetTable)
        }
      },
      //校验所有一对一子表表单
      validateSubForm(allValues) {
        return new Promise((resolve, reject) => {
          Promise.all([
          ]).then(() => {
            resolve(allValues)
          }).catch(e => {
            if (e.error === VALIDATE_FAILED) {
              // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
              this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
            } else {
              console.error(e)
            }
          })
        })
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        return {
          ...main, // 展开
          dataCiteFunctionList: allValues.tablesValue[0].tableData,
          dataResultRangeSetList: allValues.tablesValue[1].tableData,
        }
      },
      validateError(msg) {
        this.$message.error(msg)
      },

    }
  }
</script>

<style scoped>
</style>